import{useSelector,useDispatch} from 'react-redux'
import { useRef } from 'react'
import{add, addListStore } from '../../store/modules/counterStore'

export default function index(){
    // 使用数据
    // const{count}=useSelector((state)=>state.counter)
    const dispatch=useDispatch()//触发器
    // 调用仓库中的add方法
    // const addCount=()=>{
    //     const action=add()
    //     dispatch(action)
    // }   
    const{list}=useSelector((state)=>state.counter)
    const inputRef=useRef()
    
    const addList=()=>{
        const value = inputRef.current.value
        console.log(value);
        
        const action=addListStore(value)
        dispatch(action)
    }

    return(
        <div>
            {/* <h3>{count}</h3>
            <button onClick={addCount}>+</button> */}
            <input type="text" ref={inputRef} />
            <button onClick={addList}>添加</button>
            <ul>
                {
                    list.map((item)=>{
                        return(<li key={item}>{item}</li>)
                    })
                }
            </ul>
         </div>
    )
}